<template>
    <div class="user">
        <div class="wrap">
            <input class="select" v-model="serach" type="text" @keyup="onSearch()" placeholder="请输入关键字">
            <div class="select">
               <el-button-group>
                   <el-button plain @click="tobrandInsert" v-if="checkAction(26)">新增品牌</el-button>
                 </el-button-group>
            </div>
        </div>
        <el-table
           ref="multipleTable" 
           :data="tableData"
           tooltip-effect="dark"
           border
           style="width: 100%"
           >
            <el-table-column prop="id" label="id" >
            </el-table-column>
          
           <el-table-column prop="name" label="名称" >
           </el-table-column>
           
           <el-table-column   label="操作"  width="160" >
            <template slot-scope="scope">
                <el-button-group>
                  <el-button  size="mini" @click="edit(scope.row)" class="update" v-if="checkAction(27)">编辑</el-button>
                  <el-button  size="mini"  @click="del(scope.row)" class="update" v-if="checkAction(28)">删除</el-button>  
                </el-button-group>
            </template>
           </el-table-column>
         </el-table>
        
        
       </div>
</template>
<script>
export default{
    data:()=>{
       return{
         tableData: [],
         serach:'',
         roles:[],
         selection:[],
       }
   },
   async created() {
       let res=await this.$http.get('brand/select')
       console.log(res)
       this.tableData=res.data
   },
   methods: {
   
     async onSearch(){
      let res=await this.$http('brand/select?key='+this.serach);
    
      this.tableData=res.data;
     },
     edit(row){
      this.$router.push({path:`/brandEdit/${row.id}`} );
     },
    async del(row){
      console.log(1);
      let res=await this.$http.post('brand/trash',{
        id:row.id,
      });
      console.log(2)
      let res1=await this.$http.get('brand/select')
       console.log(res1)
       this.tableData=res1.data
     },
     tobrandInsert(){
        this.$router.push('/brandInsert');
      }

   },
}
</script>
<style scoped>
 .user{
     margin: 20px;
   }
 .wrap{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }
 .wrap .select{
     height: 40px;
     border: 1px solid #DCDFE6;
     border-radius: 5px;
     margin-bottom: 20px;
 }
 
 input::-webkit-input-placeholder{
      color: #DCDFE6;
 }
 .action{
  display: flex;
  flex-direction: row-reverse;
  margin: 20px;
 }
 
 .update{
   border: none;
   color: #008080;
 }
 .green{
   background-color: #008080;
 }
</style>